﻿<!-- Theaters main view --->
<div data-role="view" data-title="Theaters" id="mt-theaters-movie-view"
     data-layout="mt-main-layout"
     data-bind="events: {show: show}"
     data-init="appInit.theatersListInit">

    <div id="mt-theaters-movie-details">
        <img class="mt-movie-photo" data-bind="attr: { src: selectedMovie.imageUrl}" />
        <div class="mt-movie-details">
            <div class="mt-listitem-title" data-bind="text: selectedMovie.movieName"></div>
            <div class="mt-highlight-label" data-bind="text: selectedMovie.rating"></div>
            Date: <span class="mt-highlight-label" data-bind="text: selectedDate"></span>
        </div>
    </div>
    <hr />
    <ul id="mt-theaters-movie-list" data-role="listview"
        data-template="mt-main-tmpl-theater-list"
        data-bind="source:theaterList"></ul>
</div>
<script type="text/x-kendo-template" id="mt-main-tmpl-theater-list">
    <!-- redirect URI-->
    #var ecodedURI = 'index.html\#BookTickets.html?theaterName=' +
    encodeURIComponent(Name) +
    '&address=' + encodeURIComponent(Address) +
    '&movieName=' + encodeURIComponent(viewData.TheatresViewModel.selectedMovie.movieName) +
    '&rating=' + viewData.TheatresViewModel.selectedMovie.rating +
    '&movieId=' +  viewData.TheatresViewModel.selectedMovie.movieId +
    '&theaterId=' + TheaterId +
    '&date=' + encodeURIComponent(viewData.TheatresViewModel.selectedDate) #

    <div>
        <span class="mt-title"> #:Name# </span>
        <span class="mt-highlight-label">
            #:MilesFromCurrentLoc#
            Miles
        </span><br />
        <span class="mt-normal-label"> #:Address# </span>

        <div>
            <!--  render show times -->
            #for(var i=0; i < Timings.length; i++) {#
            <a class="mt-timings" href="#:ecodedURI#&time=#:encodeURIComponent(Timings[i])#">
                #:Timings[i]#
            </a>
            <!--Add pipe separator for show times -->
            #if(i < (Timings.length - 1)){#
            |
            <!--The pipe separator won't appear for the last item -->
            #}#
            #}#
        </div>
    </div>
</script>
